<template>
  <div class="dialog-container" style="width: 400px;">
    <el-dialog
      title="资源接口信息"
      :visible.sync="dialogFormVisible"
      width="500px"
      append-to-body
      @open="onOpen"
      @opened="onOpened"
      @close="onClose"
      @closed="onClosed"
    >
      <div class="app-container">
        <el-scrollbar v-loading="listLoading" style="height: 500px; background-color: #FFF;">
          <el-tree
            ref="tree"
            :data="list"
            show-checkbox
            node-key="uid"
            default-expand-all
            :props="defaultProps"
            :render-content="renderContent"
            :default-checked-keys="defaultCheckedKeys"
            :default-expanded-keys="defaultExpandedKeys"
            @check-change="handleClick"
          />
        </el-scrollbar>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    rowData: {
      type: Object,
      default: () => ({})
    },
    multiple: {
      type: Boolean,
      default: () => (true)
    }
  },
  data() {
    return {
      list: [],
      listLoading: false,
      calcTableHeight: '500px',
      dialogFormVisible: false,
      defaultCheckedKeys: [],
      defaultExpandedKeys: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      needCheckChildrenNodeIds: [],
      disableNoIds: []
    }
  },
  created() {},
  methods: {
    onOpen() {
      this.list = []
      this.defaultCheckedKeys = []
      this.needCheckChildrenNodeIds = []
      this.disableNoIds = []
      if (this.$listeners.getChildrenNodeIds) {
        this.$emit('getChildrenNodeIds', this.rowData, (nodeIds, disableNoIds) => {
          if (nodeIds && nodeIds.length) {
            this.needCheckChildrenNodeIds = nodeIds
          }
          if (disableNoIds && disableNoIds.length) {
            this.disableNoIds = disableNoIds
          }
        })
      }
      this.getData()
    },
    renderContent(h, { data, node, store }) {
      if (data.method) {
        var color = ''
        if (data.method === 'GET') {
          color = '#0d5aa7'
        } else if (data.method === 'POST') {
          color = '#61affd'
        } else if (data.method === 'PUT') {
          color = '#fca130'
        } else if (data.method === 'DELETE') {
          color = '#f93e3e'
        }
        return (
          <span>
          <span> {data.name}</span>
          <span> [<span style={`color:${color}`}>{data.method}</span>]{data.url}</span>
          </span>
          )
      } else {
        return (
          <span>
          <span> {data.name}</span>
          </span>
          )
      }
    },
    // 获取数据
    async getData() {
      this.listLoading = true
      const params = {}
      this.$store.dispatch('system/resourceApi/tree', params).then((data) => {
        this.list = data
        if (this.needCheckChildrenNodeIds && this.needCheckChildrenNodeIds.length) {
          var _nodeIdMap = {}
          this.needCheckChildrenNodeIds.forEach(id => {
            _nodeIdMap[id] = id
          })
          var _disableNoIdMap = {}
          this.disableNoIds.forEach(id => {
            _disableNoIdMap[id] = id
          })
          // 1.外层集合
          data.forEach(_row => {
            // 2._row是系统信息
            // _row.children是系统下的接口信息(Class)
            var children = _row.children
            if (children && children.length) {
              children.forEach(_api => {
                // 3._api是接口对象信息
                // _api.children是接口下的明细信息(Method)
                var apiChildren = _api.children
                apiChildren.forEach(_detail => {
                  // 4._detail是方法对象信息
                  if (Object.prototype.hasOwnProperty.call(_nodeIdMap, _detail.id)) {
                    // 这种方式有延迟，如果用setTimeout可以处理
                    // this.$refs.tree.setChecked(_detail.uid, true, false)
                    this.defaultCheckedKeys.push(_detail.uid)
                  }
                  // 是否禁用
                  if (Object.prototype.hasOwnProperty.call(_disableNoIdMap, _detail.id)) {
                    _detail['disabled'] = true
                  }
                })
              })
            }
          })
        }
        this.listLoading = false
      })
    },
    onOpened() {
    },
    onClose() {
    },
    onClosed() {
      this.list = []
    },
    onSubmit() {
      var checkedNodes
      var halfNodes
      var nodes
      if (this.multiple) {
        halfNodes = this.$refs.tree.getHalfCheckedNodes() || []
        nodes = this.$refs.tree.getCheckedNodes() || []
        checkedNodes = halfNodes.concat(nodes)
      } else {
        checkedNodes = this.$refs.tree.getCheckedNodes() || []
      }
      this.$emit('confirm', this.rowData, checkedNodes, halfNodes, nodes)
      this.dialogFormVisible = false
    },
    handleClick(data, checked, node) {
      if (checked && !this.multiple) {
        // this.$refs.tree.setCheckedKeys([data.id])
        this.$refs.tree.setCheckedNodes([data])
      }
    }
  }
}
</script>
<style lang="scss">
.el-scrollbar__wrap {
  overflow-x: hidden;
}
.el-dialog__body {
  background: #eef4f9;
  padding: 0px;
}
.app-container {
  padding: 10px;
  box-sizing: border-box;
  .app-container-container {
    padding: 10px;
    margin: 6px 0 0;
    background: #fff;
  }
}
</style>
